/*!
 * Ext JS Library 3.2.1
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){

    // create the Data Store
var store = new Ext.data.JsonStore({
        root: 'results',
        totalProperty: 'totalCount',
        idProperty: 'id',
        remoteSort: true,

        fields: [
            {name: 'roadway', type: 'boolean'},
{name: 'description', type: 'string'},
{name: 'end_date', type: 'date', dateFormat: 'm/d/Y'},
{name: 'projectno', type: 'string'},
{name: 'projectid', type: 'string'},
{name: 'project', type: 'string'},
{name: 'garage', type: 'boolean'},
{name: 'adaparking', type: 'boolean'},
{name: 'sidewalk', type: 'boolean'},
{name: 'start_date', type: 'date', dateFormat: 'm/d/Y'},
{name: 'pm', type: 'string'}
        ],

        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.HttpProxy({
            url: '/test'
        })
    });
    //{'root': root, 'totalCount': 'totalCount', 'id': 'id', 'fields': 'fields', 'url': 'url}
    //store.setDefaultSort('lastpost', 'desc');


     var grid = new Ext.grid.GridPanel({
        width:700,
        height:500,
        title:'Impact List',
        store: store,
        trackMouseOver:false,
        disableSelection:false,
        loadMask: true,

        // grid columns
        columns:[
{
            header: "Roadway",
            dataIndex: 'roadway',
            width: 30,
            sortable: true
        },

{
            header: "End",
            dataIndex: 'end_date',
            width: 50,
            sortable: true
        },

{
            header: "Project No.",
            dataIndex: 'projectno',
            width: 50,
            sortable: true
        },

{
            header: "ID",
            dataIndex: 'projectid',
            width: 50,
            sortable: true
        },

{
            header: "Project",
            dataIndex: 'project',
            width: 100,
            sortable: true
        },

{
            header: "Garage",
            dataIndex: 'garage',
            width: 30,
            sortable: true
        },

{
            header: "ADA Parking",
            dataIndex: 'adaparking',
            width: 30,
            sortable: true
        },

{
            header: "Sidewalk",
            dataIndex: 'sidewalk',
            width: 30,
            sortable: true
        },

{
            header: "Start",
            dataIndex: 'start_date',
            width: 30,
            sortable: true
        },

{
            header: "PM",
            dataIndex: 'pm',
            width: 50,
            sortable: true
        }],

        // customize view config
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '<p>'+record.data.description+'</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },

        // paging bar on the bottom
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show Preview',
                cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
                    var view = grid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }]
        })
    });

    // render it
    grid.render('topic-grid');

    // trigger the data store load
    store.load({params:{start:0, limit:25}});
});
